<template>
	<view class="">
		<view class="patientInfo">
			<view class="" v-for="(item, index) in formData" :key="index">
				<view class="middle-text-with-lines">
					<view class="line"></view>
					<text class="middle-text" :style='item.titleStyle'>{{ item.title }}</text>
					<view class="line"></view>
				</view>
				<up-form :model="patientInfo" class="form">
					<up-form-item v-for="(child, childIndex) in item?.formItem" :key='childIndex' :label="child.label"
						:prop="patientInfo[child.props]" borderBottom class="bor_b">
						<up-input v-model="patientInfo[child.props]" :placeholder='child.placeholder' border="none"
							v-if='child.type == "input"' :readonly="child?.readonly">
							<template #suffix v-if="child?.slot">
								{{ child?.slot }}
							</template>
						</up-input>
						<up-radio-group v-if='child.type == "radio"' v-model="patientInfo[child.props]"
							:placement="child.placement">
							<up-radio :label="item.label" v-for="(item,index) in child.options" :key="index"></up-radio>
						</up-radio-group>

					</up-form-item>
				</up-form>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		reactive,
		toRefs
	} from 'vue'
	const state = reactive({
		taskInfo: {

		},
		patientInfo: {
			hospital: '泸定县人民医院',
			taskAddress: '成都市双流区西航港大道中三段星月花园',
			doctorInfo: '邓勇',
			nurseInfo: '隔壁老王',
			callName: '杰克',
			callPhone: '19123011755',
			creatTime: '2025-02-19 15:07:53',
			// 需要填写的信息
			patientName: '邓勇',
			sex: '男',
			age: '2',
			job: '1',
			nationality: '',
			phone: '',
			marriage: '已婚',
			ID: '',
			address: '',
			source: '',
			assessment: '评估',
			patientHeight: '',
			patientWeight: '',
			temperature: '',
			pulse: '',
			diastolic: '',
			systolic: '',
			heartRate: '',
			breathe: '',
			bloodSugar: '',
			blood: '',
			awareness: '',
			rating: '',
			chiefComplaint: '主诉',
			previous: '既往史',
			allergy: '过敏史',
			family: '家族史',
			inheritance: '遗传史',
			operation: '手术史',

		},
		formData: [{
				title: '任务信息',
				titleStyle: {
					width: '330rpx'
				},

				formItem: [{
						type: 'input',
						label: '医院：',
						props: 'hospital',
						readonly: true
					},
					{
						type: 'input',
						label: '任务地址：',
						props: 'taskAddress',
						readonly: true
					},
					{
						type: 'input',
						label: '医生信息：',
						props: 'doctorInfo',
						readonly: true
					},
					{
						type: 'input',
						label: '护士信息：',
						props: 'nurseInfo',
						readonly: true
					},

					{
						type: 'input',
						label: '呼叫人姓名：',
						props: 'callName',
						readonly: true
					},
					{
						type: 'input',
						label: '呼叫人电话：',
						props: 'callPhone',
						readonly: true
					},
					{
						type: 'input',
						label: '任务创建时间：',
						props: 'creatTime',
						readonly: true
					},
				]
			},

			{
				title: '新增就诊人信息',
				titleStyle: {
					width: '630rpx'
				},
				formItem: [{
						type: 'input',
						label: '患者姓名：',
						props: 'patientName',
						placeholder: '请输入患者姓名'

					},
					{
						type: 'radio',
						label: '性别：',
						props: 'sex',
						placeholder: '请输入患者性别',
						placement: 'row',
						options: [{
								label: '男'
							},
							{
								label: '女'
							}
						]
					},

					{
						type: 'input',
						label: '年龄：',
						props: 'age',
						placeholder: '请输入患者年龄'
					},
					{
						type: 'input',
						label: '职业：',
						props: 'job',
						placeholder: '请输入患者职业'
					},
					{
						type: 'input',
						label: '民族',
						props: 'nationality',
						placeholder: '请输入患者民族'

					},

					{
						type: 'input',
						label: '联系方式',
						props: 'phone',
						placeholder: '请输入联系方式'

					},

					{
						type: 'radio',
						label: '婚姻',
						props: 'marriage',
						placeholder: '请选择婚姻',
						options: [{
								label: '已婚'
							},
							{
								label: '未婚'
							}
						]
					},
					{
						type: 'input',
						label: '身份证号',
						props: 'ID',
						placeholder: '请输入身份证号'

					},
					{
						type: 'input',
						label: '户籍地址',
						props: 'address',
						placeholder: '请输入户籍地址'
					},
					{
						type: 'input',
						label: '病人来源',
						props: 'source',
						placeholder: '请输入病人来源'
					},
				]
			},
			{
				title: '重点病种',
				titleStyle: {
					width: '330rpx'
				},
			},
			{
				title: '专科病种',
				titleStyle: {
					width: '330rpx'
				},
				formItem: [{
					type: 'input',
					label: '病人评估',
					props: 'assessment',
					placeholder: '请输入病人评估',
				}, ],
			},
			{
				title: '生命体征',
				titleStyle: {
					width: '330rpx'
				},
				formItem: [{
						type: 'input',
						label: '身高：',
						props: 'patientHeight',
						placeholder: '请输入身高',
						slot: 'cm'
					},
					{
						type: 'input',
						label: '体重：',
						props: 'patientWeight',
						placeholder: '请输入体重',
						slot: 'kg'
					},
					{
						type: 'input',
						label: '体温：',
						props: 'temperature',
						placeholder: '请输入脉搏',
						slot: '°C'
					},
					{
						type: 'input',
						label: '脉搏：',
						props: 'pulse',
						placeholder: '请输入脉搏',
						slot: 'bpm'
					},

					{
						type: 'input',
						label: '舒张压：',
						props: 'diastolic',
						placeholder: '请输入舒张压',
						slot: 'mmHg'
					},

					{
						type: 'input',
						label: '收缩压：',
						props: 'systolic',
						placeholder: '请输入收缩压',
						slot: 'mmHg'

					},
					{
						type: 'input',
						label: '心率：',
						props: 'heartRate',
						placeholder: '请输入心率',
						slot: '次/分'

					},
					{
						type: 'input',
						label: '呼吸：',
						props: 'breathe',
						placeholder: '请输入呼吸',
						slot: '次/分'

					},
					{
						type: 'input',
						label: '血糖：',
						props: 'bloodSugar',
						placeholder: '请输入血糖',
						slot: 'mmol/L'

					},
					{
						type: 'input',
						label: '血氧饱和度：',
						props: 'blood',
						placeholder: '请输入血氧饱和度',
						slot: '％'

					},
					{
						type: 'input',
						label: '意识状态：',
						props: 'awareness',
						placeholder: '请输入意识状态',
					},
				]
			},
			{
				title: '分诊评级',
				titleStyle: {
					width: '330rpx'
				},
				formItem: [{
					type: 'radio',
					label: '分诊评级',
					props: 'rating',
					placeholder: '请输入分诊评级',
					placement: 'column',
					options: [{
							label: "I级"
						},
						{
							label: "II级"
						},
						{
							label: "III级"
						},
						{
							label: "IV级"
						},
					]
				}, ],
			},
			{
				title: '分诊印象',
				titleStyle: {
					width: '330rpx'
				},
				formItem: [{
						type: 'input',
						label: '主诉',
						props: 'chiefComplaint',
						placeholder: '请输入主诉',
					},

					{
						type: 'input',
						label: '既往史',
						props: 'previous',
						placeholder: '请输入既往史',
					},
					{
						type: 'input',
						label: '过敏史',
						props: 'allergy',
						placeholder: '请输入过敏史',
					},
					{
						type: 'input',
						label: '家族史',
						props: 'family',
						placeholder: '请输入家族史',
					},
					{
						type: 'input',
						label: '遗传史',
						props: 'inheritance',
						placeholder: '请输入遗传史',
					},
					{
						type: 'input',
						label: '手术史',
						props: 'operation',
						placeholder: '请输入手术史',
					},
				],
			},

		],
		jobList: [{
				id: '1',
				name: '分类1'
			},
			{
				id: '2',
				name: '分类2'
			},
			{
				id: '3',
				name: '分类4'
			},
		]
	})
	const {
		taskInfo,
		patientInfo,
		jobList,
		formData
	} = toRefs(state)
</script>

<style scoped lang="scss">
	.middle-text-with-lines {
		display: flex;
		align-items: center;
		margin-top: 40rpx;

		.line {
			width: 100%;
			height: 2rpx;
			background-color: rgb(72, 186, 177);
			margin: 0 20rpx;
		}

		.middle-text {
			font-size: 28rpx;
			color: rgb(72, 186, 177);
		}
	}

	.form {
		padding: 0 40rpx;

		.bor_b {
			border-bottom: 2rpx solid rgb(72, 186, 177);
		}
	}
</style>